<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" size="mini" @submit.native.prevent @keyup.enter.native="loadData()">
      <el-form-item label="品牌名称">
        <el-input size="mini" v-model="queryParams.keyword" placeholder="请输入品牌名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" size="mini" @click="loadData()">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-circle-plus-outline"
          size="mini"
          @click="handleAdd()"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="selections.length <= 0"
          @click="deleteHandle()"
        >删除
        </el-button>
      </el-col>
    </el-row>

    <el-table
      :data="dataList"
      border
      v-loading="loading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;"
    >
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="name" header-align="center" align="center" label="名称"></el-table-column>
      <el-table-column prop="logo" header-align="center" align="center" label="logo">
        <template slot-scope="scope">
          <image-preview :width="120" :height="50" :src="scope.row.logo"/>
        </template>
      </el-table-column>
      <el-table-column prop="description" header-align="center" align="center" label="介绍">
        <template slot-scope="scope">
          <span> {{
              scope.row.description ? scope.row.description.length > 20 ? (scope.row.description.substr(0, 20) + '...') : scope.row.description : ''
            }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="status" header-align="center" align="center" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            @change="updateStatus(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="sort" header-align="center" align="center" label="排序"></el-table-column>
      <el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
        <template slot-scope="scope">
          <el-button icon="el-icon-paperclip" type="text" size="small" @click="bindCategory(scope.row.id)">关联分类
          </el-button>
          <el-button icon="el-icon-edit" type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
          <el-button icon="el-icon-delete" type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <brand-form ref="dataForm" @ok="this.loadData"></brand-form>

    <brand-category-form ref="brandCategoryForm"></brand-category-form>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="loadData"
    />
  </div>
</template>

<script>
import CategorySelector from '@/views/common/categorySelector.vue'
import {brandList, deleteBrand, updateBrand} from '@/api/product/brand'
import MaterialLibrary from "@/components/ImageLibrary/index.vue";
import BrandForm from "@/views/product/brand/BrandForm.vue";
import BrandCategoryForm from "@/views/product/brand/BrandCategoryForm.vue";

export default {
  data() {
    return {
      queryParams: {
        keyword: '',
        pageNo: 1,
        pageSize: 10
      },
      // 总条数
      total: 0,
      brandId: 0,
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      loading: false,
      selections: [],
    }
  },
  components: {
    BrandCategoryForm,
    BrandForm,
    MaterialLibrary,
    CategorySelector
  },
  created() {
    this.loadData()
  },
  methods: {
    resetQuery() {
      this.queryParams = {}
      this.queryParams.pageNo = 0
      this.queryParams.pageSize = 10
      this.loadData()
    },

    handleAdd() {
      this.$refs.dataForm.add()
    },

    handleEdit(id) {
      this.$refs.dataForm.edit(id)
    },

    loadData() {
      this.loading = true
      brandList(this.queryParams).then(res => {
        if (res.success) {
          this.dataList = res.data.records
          this.total = res.data.total
        } else {
          this.$message.error("列表加载失败")
        }
        this.loading = false
      })
    },
    updateStatus(row) {
      let data = {
        id: row.id,
        status: row.status
      }
      updateBrand(data).then(res => {
        if (res.success) {
          this.$message.success("状态更新成功")
          this.loadData()
        }
      })
    },

    bindCategory(id) {
      this.$refs.brandCategoryForm.open(id)
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.queryParams.pageNo = 1
      this.loadData()
    },
    // 当前页
    currentChangeHandle(val) {
      this.queryParams.pageNo = val
      this.loadData()
    },
    // 多选
    selectionChangeHandle(val) {
      this.selections = val
    },
    // 删除
    deleteHandle(id) {
      let ids = id ? [id] : this.selections.map(item => {
        return item.id
      })
      this.$confirm(
        `确认对选中数据进行删除操作?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        deleteBrand(ids).then(res => {
          if (res.success) {
            this.$message.success("删除成功")
            this.loadData()
          }
        })
      })
    }
  }
}
</script>
